<!DOCTYPE html><!--suppress ALL-->
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:replace="blog/amaze/header::head-fragment">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
</head>
<link rel="stylesheet" th:href="@{/admin/plugins/editormd/css/editormd.preview.css}"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/css/share.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/social-share.js/1.0.16/js/social-share.min.js"></script>
<body>
<div th:replace="blog/amaze/header::header-fragment"></div>
<div class="container" style="position:relative;margin-top: 2rem;">
    <article class="am-article">
        <div class="am-article-hd" style="text-align: center">
            <h1 class="am-article-title" th:text="${blogDetailVO.blogTitle}"></h1>
            <p class="am-article-meta">
                <span><i class="am-icon-calendar am-icon-fw"></i>&nbsp;</span><span
                    th:text="${#dates.format(blogDetailVO.createTime, 'yyyy-MM-dd')}"></span>
                <span><i class="am-icon-comment am-icon-fw"></i>&nbsp;</span><span th:text="${commentTotal}"></span> 条评论
                <span><i class="am-icon-eye am-icon-fw"></i>&nbsp;</span><span
                    th:text="${blogDetailVO.blogViews}"></span> 浏览
            </p>
            <div>
                <th:block th:each="tag : ${blogDetailVO.blogTags}">
                    <a class="am-badge am-badge-success"
                       th:href="@{'/tag/' + ${tag}}">
                        <th:block th:text="${tag}"></th:block>
                    </a>
                </th:block>
            </div>
        </div>
        <div style="text-align: center;z-index: 1001;margin: 20px 0;" class="social-share"
             id="socialIconsDiv"
             data-sites="qzone, qq, weibo,wechat"
             th:data-title="${blogDetailVO.blogTitle}"
             th:data-description="'烈焰之雨的博客,'+${blogDetailVO.blogTitle}">

        </div>

        <div class="am-article-bd" id="post-content">


            <th:block th:utext="${blogDetailVO.blogContent}"/>
            <div class="am-text-center" id="doc-qrcode" style="padding: 2rem 0"></div>
            <style>
                #doc-qrcode img {
                    margin: 0 auto;
                }
            </style>
            <p class="am-article-meta" style="text-indent: 2em">
                欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。</p>
        </div>
    </article>
    <aside class="comments" id="comments">
        <th:block th:if="${null != commentPageResult}">
            <ul class="am-comments-list am-comments-list-flip">
                <th:block th:each="comment,iterStat : ${commentPageResult.list}">
                    <li class="am-comment">
                        <article class="am-comment">
                            <a href="#link-to-user-home">
                                <img th:src="${comment.headImage}" alt="" class="am-comment-avatar" width="48"
                                     height="48"/>
                            </a>
                            <div class="am-comment-main">
                                <header class="am-comment-hd">
                                    <div class="am-comment-meta">
                                        <a class="am-comment-author" th:text="${comment.nickName}">某人</a>
                                        评论于
                                        <time th:text="${#dates.format(comment.commentCreateTime, 'yyyy-MM-dd HH:mm:ss')}">
                                            2019-12-12 15:30
                                        </time>
                                    </div>
                                </header>

                                <div class="am-comment-bd" th:text="${comment.commentBody}">

                                </div>
                            </div>
                        </article>
                    </li>
                    <th:block th:unless="${#strings.isEmpty(comment.replyBody)}">
                        <li class="am-comment am-comment-flip ">
                            <article class="am-comment ">
                                <a href="#link-to-user-home">
                                    <img th:src="@{${configurations.get('yourAvatar')}}" alt=""
                                         class="am-comment-avatar" width="48" height="48"/>
                                </a>
                                <div class="am-comment-main">
                                    <header class="am-comment-hd">
                                        <!--<h3 class="am-comment-title">评论标题</h3>-->
                                        <div class="am-comment-meta">
                                            <a class="am-comment-author" th:text="${configurations.get('yourName')}">dddpeter</a>
                                            回复 <strong>
                                            <th:block th:text="${comment.nickName}"></th:block>
                                        </strong> 于
                                            <time th:text="${#dates.format(comment.replyCreateTime, 'yyyy-MM-dd HH:mm:ss')}">
                                                2019-12-12 15:30
                                            </time>
                                        </div>
                                    </header>

                                    <div class="am-comment-bd" th:text="${comment.replyBody}">

                                    </div>
                                </div>
                            </article>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </th:block>
    </aside>
    <th:block th:if="${blogDetailVO.enableComment==0}">
        <aside class="create-comment" id="create-comment">
            <div class="form" id="commentForm" >
                <h2><i class="fa fa-pencil fa-lg" style="font-size: 1.7em"></i> 添加评论</h2>
                <input type="hidden" id="blogId" name="blogId" th:value="${blogDetailVO.blogId}"></input>
                <div class="am-g" style="padding: 6px">
                    <div class="am-u-sm-12 am-u-md-4 am-u-lg-4" style="background-color: #FFFFE0;border-radius: 5px 5px;border: 1px dashed #C1C1C1;padding-bottom: 8px;padding-top: 8px;">
                        <!--横向表单-->
                        <div class="am-form" role="form">
                            <!--头像-->
                            <div class="am-form-group" style="text-align: center">
                                <img class="am-img-thumbnail" id="idPic" src="/blog/default/img/avatar.png"
                                     style="width:50px; border-radius: 25px;">
                            </div>
                            <!--QQ号-->
                            <div class="am-form-group">
                                <input class="am-form-field" id="qqNum" onmouseout="qqfun()" placeholder="QQ号"
                                       type="text">
                            </div>
                            <!--昵称-->
                            <div class="am-form-group">
                                <input class="am-form-field" id="commentator" placeholder="QQ昵称" type="text">
                            </div>
                            <!--邮箱-->
                            <div class="am-form-group">
                                <input class="am-form-field" id="email" placeholder="电子邮箱" type="text">
                            </div>
                        </div>
                      <!--  <div>
                            &lt;!&ndash;网站地址&ndash;&gt;
                            <input id="websiteUrl" name="websiteUrl" placeholder="你的网站地址(可不填)"
                                   type="text">
                        </div>-->
                    </div>
                    <div class="am-u-sm-12 am-u-md-8 am-u-lg-8 am-form">
                        <!--评论-->
                    <textarea id="commentBody" name="commentBody" placeholder="请输入您的评论"
                              rows="7" ></textarea>
                        <div  class="verif-div am-form am-g">
                            <!--图片验证-->
                            <div class="am-u-sm-6 am-u-md-8 am-u-lg-8">
                            <input  id="verifyCode" name="verifyCode" placeholder="Verification Code"
                                   type="text">
                            </div>
                            <div class="am-u-sm-6 am-u-md-4 am-u-lg-4">
                            <img alt="单击图片刷新！" class="pointer" onclick="this.src='/common/kaptcha?d='+new Date()*1"
                                 th:src="@{/common/kaptcha}">
                            </div>
                        </div>
                    </div>


            </div>
                <div style="width: 100%;text-align: center">
                    <!--提交-->
                    <button class="submit am-btn am-btn-primary" id="commentSubmit" style="width:200px" type="submit">提交</button>
                </div>
            </div>
        </aside>
        <style>
            .verif-div{
                width: 100%;
            }
            .verif-div img{
                width: 100%;
                height: 35px;
                margin: 6px 0;
                border: 1px solid #ccc;
            }

        </style>
    </th:block>
</div>

</div>
<div th:replace="blog/amaze/to-top::to-top-fragment"></div>
<footer th:replace="blog/amaze/footer::footer-fragment"></footer>
</body>
<script th:src="@{/blog/plugins/jquery/jquery.min.js}"></script>

<!-- editor.md -->
<script th:src="@{/admin/plugins/editormd/editormd.min.js}"></script>

<script th:src="@{/blog/plugins/comment/valid.js}"></script>
<script th:src="@{/blog/plugins/comment/comment.js}"></script>
<script th:src="@{/admin/plugins/sweetalert/sweetalert.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/marked.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/admin/plugins/editormd/lib/jquery.flowchart.min.js}"></script>


<script type="text/javascript">
    $(function () {
        var testEditormdView;
        testEditormdView = editormd.markdownToHTML("post-content", {
            htmlDecode: "style,script,iframe,a,img,center",  // you can filter tags decode
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
            previewCodeHighlight: true
        });
        var qrcode = new QRCode("doc-qrcode", {
            text: window.location.href,
            width: 128,
            height: 128,
            colorDark: "#168f48",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H
        });
    });
</script>

</html>